<!DOCTYPE html>
<html ng-app="menuApp" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <header th:replace="importCommon"></header>
    <link rel="stylesheet" th:href="@{/assets/jstree/themes/default/style.css}" />
    <link rel="stylesheet" th:href="@{/css/menu.css}" />
    <script th:src="@{/js/lib/angular/angular-sanitize.min.js}"></script>
    <script th:src="@{/js/common/customValid.js}"></script>
    <script th:src="@{/js/common/FormDirective.js}"></script>
    <script th:src="@{/js/system/controller/DeptCtrl.js}"></script>
    <script th:src="@{/js/system/service/DeptService.js}"></script>
    <script th:src="@{/assets/jstree/jstree.min.js}"></script>
    <script th:src="@{/assets/jstree/checkboxTree.js}" type="text/javascript"></script>
    <title>菜单管理</title>
    <style type="text/css">
    	#menu-edit .add_menu tr{
            margin-bottom:10px;
    	}
        #menu-edit .add_menu td{
            line-height:45px !important;
        }
        #select_type{
            padding-left: 37px;
            width: 114px;
            margin-left: 10px;
        }
        #editContent{
            padding:8px 78px 24px;
        }
    </style>
</head>
<body ng-controller="menuCtrl">
<div class="page-content" style="height:100%;padding:0;">

    <div id="treeMenu" style="width:20%;float: left;border-right: 2px solid #ccc;">
        <div style="height: 40px;line-height: 40px;">
            <div style="text-align: center;background: #0679CC;color: white;">
                菜单管理
            </div>
            <div>
                <a  href="javascript:void(0)" style="display: none;"></a>
                <a href="javascript:void(0)"></a>
            </div>
        </div>
        <div style="height: 463px;overflow:auto;">
            <div id="jstree"></div>
        </div>
        <div id="menu-edit" style="display:none">
            <form name="form" method="post">
                <div class="add_menu">
                    <div id="Adding_menu">
                        <div  id="editContent" class="page-content">
                            <table cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td class="label_name">菜单名称</td>
                                    <td>
                                        <input name="menuName" type="text" ng-model="menu.name" class="addtext" value="" style="width: 300px"  title="" ht-validate="{maxlength:100}" />
                                        <i style="color: #F60;">*</i>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label_name">是否显示</td>
                                    <td>
                                        <div class="radio ">
                                            <label>
                                                <input type="radio" class="ace"  name="isShow" ng-model="menu.isShow"  ng-checked="true" value="1"  />
                                                <span class="lbl">是</span>
                                            </label>
                                        </div>
                                        <div class="radio ">
                                            <label>
                                                <input type="radio" class="ace" name="isShow"  ng-model="menu.isShow"  ng-checked="menu.isShow==0" value="0"  />
                                                <span class="lbl">否</span>
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label_name">类型</td>
                                    <td>
                                        <select name="type"  ng-model="menu.type" size="1" id="select_type">
                                            <option ng-repeat="type in menuType" ng-selected="menu.type==type.typeId" value="{{type.typeId}}" ng-bind="type.name"></option>
                                        </select>
                                        <i style="color: #F60;">*</i>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label_name">URL地址</td>
                                    <td>
                                        <input name="url" title="" type="text" ng-model="menu.url" value="" style="width: 300px" ht-validate="{required:false}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label_name">icon</td>
                                    <td>
                                        <input name="icon" title="" type="text" ng-model="menu.icon" value="" style="width: 200px" ht-validate="{string:false}" />
                                        <a href="http://www.bootcss.com/p/font-awesome/#icons-new" target="_blank" style="text-decoration: none;" class="dropdown-toggle">查看图标</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label_name">描述</td>
                                    <td>
                                        <input name="remark" type="text" ng-model="menu.remark" value="" style="width: 300px"  title=""/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
            <div style="margin:0 50%;" >
                <button type="button" class="btn btn-primary" ht-save="/menu/add" ng-model="menu" >保存</button>
            </div>
        </div>
    </div>
    <div id="content" style="width: 80%;float: right;height: 100%;overflow: auto;">
        <div class="Res Manager_style">
            <div class="table_res_list">
                <table style="text-align: center;" id="Res_list" cellpadding="0" cellspacing="0" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>菜单名称</th>
                        <th>上级菜单</th>
                        <th>菜单类型</th>
                        <th>是否显示</th>
                        <th>URL地址</th>
                        <th>创建日期</th>
                        <th>最后更新日期</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="detail in menus">
                        <td class="atxt_name" ng-bind="detail.name"></td>
                        <td class="atxt_name" ng-bind="detail.parentName"></td>
                        <td class="atxt_name">
                            <span ng-class="{true:'label label-sm label-warning arrowed arrowed-right',false:'label label-sm label-success arrowed arrowed-in'}[detail.type==0]"  ng-bind="detail.type==0 ? '菜单':'按钮'"></span>
                        </td>
                        <td ng-bind="detail.isShow==1? '是':'否'"></td>
                        <td class="dt-grid-cell hidden-xs hidden-sm  text-center" ng-bind="detail.url"></td>
                        <td ng-bind="detail.createTime | date:'yyyy-MM-dd HH:mm:ss'"></td>
                        <td ng-bind="detail.updateTime | date:'yyyy-MM-dd HH:mm:ss'"></td>
                        <td ng-bind="detail.remark"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var layerIndex,jstree,currentNode;
    (function(){
        jstree = $('#jstree').jstree({
     "core" : {
         "animation" : 0,
         "check_callback" : true,
         "themes" : { "stripes" : true },
         "data" : {
             "url" : function (node) {
                 return _ctx+"/menu/getTree";
             },
             "data" : function (node) {
                 return { "id" : node.id };
             },
         }},
         "types" : {
             "file" : {
                 "icon" : "glyphicon glyphicon-file",
                 "valid_children" : []
             }
         },
     "plugins" : [ "contextmenu","types" ],
     "contextmenu":{
         "items":{
             "create":null,
             "rename":null,
             "remove":null,
             "ccp":null,
             "editMenu":{
                 "label":"编辑",
                 "action":function(data){
                     openMenuEdit("edit",getSelectItem(data).id);
                 }
             },
             "addMenu":{
                 "label":"添加同级菜单",
                 "action":function(data){
                     openMenuEdit("add",getSelectItem(data).parent);
                 }
             },
             "addSubMenu":{
                 "label":"添加子菜单",
                 "_disabled":function(data){
                	 var　selectData = getSelectItem(data);
                	 return selectData.original.type;
                 },
                 "action":function(data){
                	 var　selectData = getSelectItem(data);
                     openMenuEdit("add",selectData.id);
                 }
             },
             "moveMenu":{
                 "label":"移动菜单",
                 "action":function(data){
                     layer.alert("正在开发中......");
                 }
             },
             "delMenu":{
                 "separator_before":true,
                 "label":"删除菜单",
                 "action":function(data){
                     AngularUtil.triggerScopeFun("deleteByMenuId",getSelectItem(data).id);
                 }
             }
         }}});
        function getSelectItem(data){
            var inst = $.jstree.reference(data.reference),
                    obj = inst.get_node(data.reference);
            currentNode = obj;
            return obj;
        }
        $('#jstree').bind("activate_node.jstree", function (obj, e) {
            var menuId = e.node.id;
            if(menuId){
                AngularUtil.triggerScopeFun("getParentByMenuId",menuId);
            }
        });

        $('#jstree').bind("show_contextmenu.jstree", function (obj, e) {
        	// 如果是按钮级别的菜单， 隐藏
        	if(e.node.original.type){
        		$(".vakata-contextmenu-disabled").hide();
        	}
        });
        function openMenuEdit(action,id){
            var title = action == "edit"? "编辑":"添加";
            var scope = AngularUtil.getScope();
            scope.menu = {};
            if(action == "edit"){
                AngularUtil.triggerScopeFun("getByMenuId",id);
            }
            // 添加菜单
            if(action == "add"){
                scope.menu.parentId = id;
                scope.menu.type = "0";
                scope.menu.isShow = 1;
            }
            AngularUtil.setData(scope);
            layerIndex = layer.open({
                type : 1,
                title : title,
                shadeClose : true, //点击遮罩关闭层
                area : [ '550px', '440px' ],
                content : $('#menu-edit'),
            });
        }
    })();
</script>
</html>


